<template>
	<div>
		<div class="box">
			<div class="title">
				<span class="tag"></span>
				租金调整-保险
			</div>
			<AForm v-model="formData" :config="formList" :state="state"></AForm>

			<div class="insurance">
				<div class="insurancetitle">商业险险种</div>
				<div class="insurancelist">
					<el-form :model="formData" ref="form" size="normal">
						<ATable
							:state="state"
							model="arr"
							:config="tableColumns"
							v-model="formData.arr"></ATable>
					</el-form>
					<el-button
						v-if="state !== 'disabled' && state !== 'readonly'"
						class="btn"
						plain
						type="primary"
						size="default"
						icon="el-icon-plus">
						增加其他商业险种
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import AForm from '@/components/A/A-form/form/index.vue';
	import ATable from '@/components/A/A-form/table/index.vue';
	export default {
		name: '',
		components: { AForm, ATable },
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				},
			},
			state: {
				required: false,
			},
		},
		dicts: ['in_su_rance_com_pany', 'quota_insurance_standard_type'],
		data() {
			return {};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			formList() {
				return [
					{
						label: '购买类型',
						prop: 'a',
						type: 'radioGroup',
						dict: {
							list: [],
						},
					},
					{
						label: '购买方式',
						prop: 'a',
						type: 'radioGroup',
						dict: {
							list: [],
						},
					},
					{
						label: '保险公司',
						prop: 'a',
						type: 'select',
						dict: {
							list: this.dict.type.in_su_rance_com_pany,
						},
					},
					{
						label: '保险标准',
						prop: 'a',
						type: 'select',
						dict: {
							list: this.dict.type.quota_insurance_standard_type,
						},
					},
				];
			},
			tableColumns() {
				return [
					{
						label: '操作',
						// columnSlot: 'handle',
						prop: 'a',
						type: 'checkbox',
						prototype: {
							trueLabel: 1,
							falseLabel: 0,
						},
						on: {
							change: ({ row, val }) => {
								if (row.type == 0) {
									if (val == 0) {
										row.c = '加入';
									} else {
										row.c = '未加入';
									}
								}
							},
						},
					},
					{
						label: '险种',
						prop: 'b',
					},
					{
						label: '保额',
						prop: 'c',
						type: ({ row }) => {
							if (row.type == 0) {
								return 'text';
							}
							if (row.a == 1) {
								return 'select';
							} else if (row.a == 0) {
								return 'text';
							}
						},
						dict: {
							list: [
								{
									label: 2,
									value: 2,
								},
							],
						},
					},
				];
			},
		},
		created() {
			this.formData.arr = [
				{
					a: 1,
					b: 1,
					c: undefined,
					type: 0,
				},
				{
					a: 0,
					b: 2,
					c: 2,
					type: 1,
				},
			];
		},
		mounted() {},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-top: 15px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
	.insurance {
		background-color: #f7fbff;
		border-radius: 4px;
		padding: 16px;
		margin-top: 15px;
		.insurancetitle {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #464646;
			line-height: 22px;
			padding-bottom: 10px;
		}
	}

	.btn {
		margin-top: 15px;
		width: 100%;
	}
</style>
